<script setup lang='ts'>
// 自动导入 ./source 文件下的所有图标文件
const modules: Record<string, any> = import.meta.glob(
  ["./source/**/*.svg","./source/**/*.png","./source/**/*.jpeg","./source/**/*.jpg"],
  {
    eager: true,
  }
);

const icons:{[key:string]:any} = {}
Object.keys(modules).forEach(key => {
  const pathArr=key.split('/')
  const fileName=pathArr[pathArr.length-1].split('.')[0]
   icons[fileName]=modules[key].default
});

// console.log(icons)  // 所有图标模块

const props=withDefaults(defineProps<{
   type?:'imgIcon' | 'aliIcon'   // imgIcon：使用 ./source下的图片资源 。aliIcon：使用下载的阿里图标资源，常用的是font class方式  
   name:string           // imgIcon:name属性同 icon的文件名（不包含后缀）。aliIcon:name是font class方式的name
   height?:string
   width?:string
   alt?:string          
   iconStyle?:{[key:string]:any}
}>(),{
   type:'imgIcon',
   height:'100px',
   width:'100px',
   alt:'icon',
   iconStyle:()=>({}),
})
// imgIcon方式的图标颜色有可操作性，看 .svg文件里的 fill属性
</script>

<template>
<div class="my-icon">
  <img :src="icons[props.name]" 
    :style="{...iconStyle,height,width}"
    :alt="alt" 
    class="icon" 
    v-if="type=='imgIcon'"
  />

  <span v-if="type=='aliIcon'" 
  :class="['menu_item_icon','iconfont',`icon-${name}`]" 
  :style="{...iconStyle,height,width}"></span>
</div>
</template>

<style scoped lang="scss">

</style>